<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Popular modern and powerful data visualization library.">
<meta name="keywords" content="html,svg,vml,javascript,charts,data visualization,animation">
<title>Data visualization library - Charts</title>

<script src="../dom/__ns__.js"></script>
<script src="../dom/EventDispatcher.js"></script>
<script src="../dom/Template.js"></script>
<script src="../formatters/__ns__.js"></script>
<script src="../formatters/DateFormatter.js"></script>
<script src="../formatters/NumberFormatter.js"></script>
<script src="../locale/__ns__.js"></script>
<script src="../locale/Calendar.js"></script>

<script src="../net/__ns__.js"></script>
<script src="../net/HttpRequest.js"></script>

<script src="../util/__ns__.js"></script>
<script src="../util/Locale.js"></script>
<script src="../util/Object.js"></script>

<script src="__ns__.js"></script>
<script src="DataTable.js"></script>

<!--script src="../../bin/jscb.js"></script-->

<script>
window.onload = function() {
  var data = [
    ['Country', 'Population'],
    ['Germany', 200],
    ['USA',     300],
    ['Brazil',  400],
    //['Canada',  500],
    //['France',  600],
    //['Russia',  700]
  ];

  (new charts.DataTable('data-table-container-1')).draw(data, {
    'rows': {'limit': 3}
  });

  var table = new charts.DataTable('data-table-container-2');
  table.addEventListener('sort', function() {
    window.console && console.log(table.getColumn());
  });
  var options = {
    //'header': false,
    //'footer': false,
    'bool-format': ['<input type="checkbox" checked>', '<input type="checkbox">'],
    'caption': 'Table caption',
    'rows': {'limit': 3}
  };

  table.draw([
    [
     //{label: '', type: 'bool'},
     {span: 2, label: 'Country', type: 'text', width: '50%', title: 'Title'},
     {label: 'Population', type: 'number'},
     {label: 'Date', name: 'date', type: 'date'},
     {label: 'Bool', type: 'bool', format: ['Yes', 'No']},
     {label: 'Hidden', hidden: true}
    ],

    [true, {value: 'Germany'}, {value: 20000}, {value: new Date}, true, 'hidden'],
    [false, 'USA', 30000, new Date, {value: false}, 'hidden'],
    [false, {value: 'Brazil', format: '<b>{{ value }}</b>'}, {value: 40000}, {value: new Date, format: 'YYYY/MM/dd'}, true, 'hidden'],
    [false, 'Canada', 50000, new Date, {value: false}, 'hidden'],
    [true, 'France', 60000, +new Date, {value: false}, 'hidden'],
    [{value: 'Total', span: 2, type: 'text'}, '12345', new Date, true, 'hidden']
  ], options);
};

</script>
<style>
.data-table,
.data-table caption,
.data-table th,
.data-table td {border-collapse: collapse; border: solid 1px #666;}
.data-table caption {border-bottom: 0;}
.data-table tfoot {font-weight: bold;}
.data-row-even {background: #ccc;}
.data-row-odd {background: #fff;}
.data-cell-string {text-align: left;}
.data-cell-number {text-align: right;}
.data-sort-asc {background: red}
.data-sort-desc {background: green}
</style>
</head>
<body>
  <div class="chart-wrapper">
    <div style="clear:both;text-align:center">
      <a href="https://jscb.googlecode.com/svn/trunk/docs/symbols/charts.DataTable.html#constructor">Data Table</a>
    </div>
    <div id="data-table-container-1"></div>
    <p>&nbsp;</p>
    <div id="data-table-container-2"></div>
  </div>

  <script>
  var _gaq = _gaq || [];
  
  _gaq.push(
            ['projectTracker._setAccount', 'UA-5065160-9'],
            ['projectTracker._trackPageview']);
  
  (function() {
   if (document.location.protocol != 'file:') {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
   }
  })();
  </script>
</body>
</html>